/* eslint-disable max-len */
/* eslint-disable no-multiple-empty-lines */
/* eslint-disable prettier/prettier */
import { connect } from "react-redux";
import React, { PureComponent } from "react";
import { View, StyleSheet, ScrollView, Text, TouchableOpacity, Alert, Image } from "react-native";
import { Divider, Utils, TYFlatList, Popup, TopBar } from "tuya-panel-kit";
import TYSdk from "../../api";
import dpCodes from "../../config/dpCodes";

import OpenGuideView from "./openTankGuide";
import style from '../../config/style';
import FishReadyView from "./fishReady";
import FishCultureView from "./fishCulture";
import OpenTankGuideView from "./openTankGuide";
import FishTankKeepView from "./fishTankKeep";
import FilterReplaceView from "./filterReplace";
import Res from '../../res';

const { convertX: cx } = Utils.RatioUtils;
const { convertY: cy, viewWidth, viewHeight } = Utils.RatioUtils;

const TYEvent = TYSdk.event;
const TYDevice = TYSdk.device;
const TYNative = TYSdk.native;
const TYMobile = TYSdk.mobile;


class HelpScene extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      showTop: true,
    };
  }

  topView() {
    return (
      <TopBar.Container
        background="#FFFFFF"
        style={{ height: TopBar.height }}
        contentStyle={{ height: TopBar.height, marginTop: 10 }}
      >
        <TopBar.Action size={20} source={Res.fback} color="#4C4C4C" onPress={() => TYSdk.Navigator.pop()} />
        <TopBar.Content />
      </TopBar.Container>
    );
  }

  render() {
    const { helpValue } = this.props;
    const { showTop } = this.state;
    return (
      <View style={style.container}>
        { showTop ? this.topView() : null }
        <ScrollView
          accessibilityLabel="ErrorListScene_ScrollView"
          contentContainerStyle={ helpValue === 2 ? style.scrollLongView : style.scrollHelpView}
        >
          {/* 养鱼筹备 */}
          {helpValue === 1 ? (<FishReadyView />) : null}
          {/* 开缸指导 */}
          {helpValue === 2 ? (<OpenTankGuideView />) : null}
          {/* 养鱼小知识 */}
          {helpValue === 3 ? (<FishCultureView />) : null}
          {/* 鱼缸维护 */}
          {helpValue === 4 ? (<FishTankKeepView />) : null}

          {/* 更换滤材教学 0物理滤材 1生化滤材 */}
          {helpValue === 5 ? (<FilterReplaceView type={0} />) : null}
          {helpValue === 6 ? (<FilterReplaceView type={1} />) : null}

        </ScrollView>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff"
  },

});

export default connect(({ dpState }) => ({
}))(HelpScene);
